<template>
  <div class="app-container">
    <el-button  type="primary" @click="dialogVisible = true">添加数据</el-button>
    <el-dialog title="添加数据" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="日志内容">
          <el-input v-model="form.content"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleAddSubmit">确 定</el-button>
      </span>
    </el-dialog>


    <el-dialog title="修改日志" :visible.sync="dialogVisible_updateForm" width="30%" :before-close="handleClose">
      <el-form ref="form" :model="updateForm" label-width="80px">
        <el-form-item label="日志内容">
          <el-input v-model="updateForm.content"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible_updateForm = false">取 消</el-button>
        <el-button type="primary" @click="execEdit">确 定</el-button>
      </span>
    </el-dialog>

    <el-table
      :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
      style="width: 100%"
    >
      <el-table-column label="时间" prop="createAt"></el-table-column>
      <el-table-column label="内容" prop="content"></el-table-column>
      <el-table-column align="right">
        <template slot="header" > 
          <!-- slot-scope="scope" -->
          <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
        </template>
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="pageSize"
      :current-page="currPage"
      @current-change="handleCurrentChange"
      >
    </el-pagination>
  </div>
</template>
<script>

//import { index } from "@/api/mylogapi";

import { index,add,del ,update,page} from "@/api/mylogapi";
import { MessageBox, Message } from 'element-ui'

export default {
  data() {
    return {
      form:{},
      updateForm:{},
      dialogVisible: false,
      dialogVisible_updateForm: false,
      tableData: [ 
      ],
      search: "",
      total:0,
      pageSize:10,
      currPage:1
    };
  },
  created(){
    this.loadData()
  },
  methods: {
    loadData: function (){
      this.loadPage(this.currPage,this.pageSize) 
    },

    loadPage: function (page1,size) {
      page(page1,size).then(
        response => {
          this.tableData = response.data.data

          this.tableData.forEach(element => {
            element.createAt = this.formatDate(element.createAt)
          });

          this.total = response.data.totalSize
          this.pageSize = response.data.size
          this.currPage = response.data.curPage
          console.log(">>>" + JSON.stringify(response))
        }
      )
    }
    ,
    handleCurrentChange:function (newPage) {
       this.loadPage(newPage,this.pageSize) 
    }
    ,
    formatDate: function (value) {
      let date = new Date(value);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? ('0' + MM) : MM;
      let d = date.getDate();
      d = d < 10 ? ('0' + d) : d;
      let h = date.getHours();
      h = h < 10 ? ('0' + h) : h;
      let m = date.getMinutes();
      m = m < 10 ? ('0' + m) : m;
      let s = date.getSeconds();
      s = s < 10 ? ('0' + s) : s;
      return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
    },
    handleEdit(index, row) { 

      this.updateForm = row;

      this.dialogVisible_updateForm = true
    },
    execEdit() {

      update(this.updateForm).then(response => {
        this.dialogVisible_updateForm = false 
        Message({
          message: '编辑成功',
          type: 'success',
          duration: 1 * 1000
        })
        this.loadData()
      })      
    },
    
    handleDelete(index, row) {
      del(row.id).then(response => {
         Message({
          message: '删除成功',
          type: 'success',
          duration: 1 * 1000
        })
        this.loadData()
      })
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    handleAddSubmit(){
      this.dialogVisible = false
      // alert(">> "+JSON.stringify(this.form))

      add(this.form).then(response => {
           this.loadData()
      })
    }
  },
};
</script>